<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel='stylesheet' type='text/css'
	href='../jeasyui_lib/themes/default/easyui.css'>
<link rel='stylesheet' type='text/css'
	href='../jeasyui_lib/themes/icon.css'>
<script type='text/javascript' src='../jeasyui_lib/jquery-1.7.1.min.js'></script>
<script type='text/javascript' src='../jeasyui_lib/jquery.easyui.min.js'></script>
<script type='text/javascript'>
	$(document).ready(function(){
		$('#dg').datagrid({
			url: 'get_agen.php',
		    columns:[[  
		        {field:'hp',title:'HP',width:100},  
		        {field:'nama',title:'Nama',width:100},  
		        {field:'kelompok',title:'Kelompok',width:100,align:'right'}  
		    ]],
		    editors:[[{type:'text',options:{required:true}},
		             {type:'validatebox',options:{required:true}},
		             {type:'validatebox',options:{required:true}}]]
		});
	});
</script>
</head>
<body>
	<table class="easyui-datagrid" id='dg' title='Daftar Agen'
		style="width: 550px; height: 250px;" toolbar='#toolbar'
		rownumbers='true' fitColumns='true' singleSelect='true'>
		<!-- <thead>
			<tr>
				<th field='hp' width='50'
					editors="{type:'validatebox',options:{required:true}}">HP</th>
				<th field='nama' width='50'
					editors="{type:'validatebox',options:{required:true}}">Nama</th>
				<th field='kelompok' width='50'
					editors="{type:'validatebox',options:{required:true}}">Kelompok</th>
			</tr>
		</thead> -->
	</table>
	<div id='toolbar'>
		<a href='#' class='easyui-linkbutton' iconCls='icon-add' plain='true'
			onclick="javascript:$('#dg').edatagrid('addRow')">New</a> <a href='#'
			class='easyui-linkbutton' iconCls='icon-remove' plain='true'
			onclick="javascript:$('#dg').edatagrid('destroyRow')">Delete</a> <a
			href='#' class='easyui-linkbutton' iconCls='icon-save' plain='true'
			onclick="javascript:$('#dg').edatagrid('saveRow')">Save</a> <a
			href='#' class='easyui-linkbutton' iconCls='icon-undo' plain='true'
			onclick="javascript:$('#dg').edatagrid('cancelRow')">Cancel</a>
	</div>
</body>
</html>